﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/themes/default/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.2.js" type="text/javascript"></script> 
    <script>
        $(document).bind('mobileinit', function () {
            $.event.special.swipe.horizontalDistanceThreshold = 100; // 修改触发 swipe 事件的最小水平拖曳距离为 100(px)
            $.event.special.swipe.verticalDistanceThreshold = 120; // 修改触发 swipe 事件的最大垂直拖曳距离为 120 (px)
        });
        $(function () {
            $("#home").live('swipeleft', function () {
                $('#toPage2').click(); // 为首页绑定向左划动事件
            });
            $("#page-2").live('swiperight', function () {
                $('#toHome').click(); // 为另一页面绑定向右划动事件
            });
        });
    </script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>
                jQuery Mobile Demo</h1>
        </div>
        <div data-role="content">
            <p>
                本例子中，为两个页面的 body 元素分别绑定了 swipeleft 和 swiperight ，划动后分别触发相应的链接，转到另一个页面，另外使用 data-transition="slide"
                把页面过场改为“滑动”效果，从而达到 Apps 中常用的滑动换页效果。</p>
            <a id="toPage2" href="#page-2" data-role="button" data-transition="slide" data-theme="b">
                向左滑动触发我这个链接</a>
        </div>
        <div data-role="footer">
            <h2>
                Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none;">
                    Kayo</a></h2>
        </div>
    </div>
    <div data-role="page" id="page-2">
        <div data-role="header">
            <h1>
                jQuery Mobile Demo</h1>
        </div>
        <div data-role="content">
            <a id="toHome" href="#home" data-role="button" data-theme="b" data-transition="slide"
                data-direction="reverse" data-rel="back">向右滑动触发我这个链接</a>
        </div>
        <div data-role="footer">
            <h2>
                Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none;">
                    Kayo</a></h2>
        </div>
    </div>
</body>
</html>
